React = require('react')
Card = require('antd-mobile/lib/card')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
TopNotice = require('antd-mobile/lib/notice-bar')
RefreshControl = require('antd-mobile/lib/refresh-control')
{View,Image,Text,Linking,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity,ActivityIndicator} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList} = require('../actions/page_mt.js')
{connect} = require('react-redux')
moment = require('moment')
_ = require('underscore')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')
basePage = require('../mixins/basePage.js')
renderAfterTransfer = require('../highOrderComponent/renderAfterTransfer.js')
lazyLoadData = require('../highOrderComponent/lazyLoadData.js')
# Page_Mt = React.createClass
  # mixins:[basePage]
class Page_Mt extends React.Component
  constructor:(props)->
    super
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
  phoneClickHandle:(number)->
    url = "tel:#{number}"
    setTimeout ->
      Linking.canOpenURL(url).then (supported)->
        if supported
          Linking.openURL(url)
        else
          Toast.show("不能识别当前号码")
    ,200
  renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>浏览码头信息</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
        </View>
      </View>
  renderListColumns:->
    <View style={{flexDirection:'row',backgroundColor:'#f9f9f9',padding:10,justifyContent:'center',alignItems:'center'}}>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>码头名称</Text>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>所属港区</Text>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>码头性质</Text>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontWeight:'bold'}}>码头电话</Text>
      </View>
    </View>
  renderRow:(rowData,sectionID,rowID,highlightRow)->
    bColor = if rowID%2 isnt 0 then "#f9f9f9" else "#ffffff"
    <TouchableHighlight onPress={->highlightRow(rowID)} key={rowData.CHDOCKCODE}>
      <View style={{flexDirection:'row',padding:10, backgroundColor:bColor,justifyContent:'center',alignItems:'center'}}>
          <View style={{flex:1}}>
            <Text>{rowData.VCDOCKNAME}</Text>
          </View>
          <View style={{flex:1}}>
            <Text>{rowData.GQNAME}</Text>
          </View>
          <View style={{flex:1}}>
            <Text>{rowData.XZNAME}</Text>
          </View>
          <View style={{flex:1}}>
            <TouchableHighlight onPress={@phoneClickHandle.bind(@,rowData.VCTELEPHONE1)}>
              <Text style={{color:'blue'}}>{rowData.VCTELEPHONE1}</Text>
            </TouchableHighlight>
          </View>
      </View>
    </TouchableHighlight>
  _onEndReached:(event)->
    return if @props.isLoading or @props.refreshing or @props.completed
    @props.fetchGet(@props.pageIndex+1) if @props.pageIndex not in [null,undefined]
  _renderListFooter:->
    if @props.completed
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>
  refreshList:->
    @props.fetchRefresh()
  _renderListView:->
    <ListView dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader}
          renderRow={@renderRow.bind(@)}
          renderFooter={@_renderListFooter.bind(@)}
          pageSize={1}
          scrollEventThrottle={20}
          onEndReached={@_onEndReached.bind(@)}
          onEndReachedThreshold={20}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList.bind(@)}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>

  render:->
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@renderHeader()}
      {
        if @props.connected is false
          if @props.list.length>0
            <TopNotice mode="closable" style={{margin:10}}>
              无网络连接，您现在看到的是缓存数据
            </TopNotice>
          else
            <TopNotice mode="closable" style={{margin:10}}>
              当前无网络连接，请稍后重试
            </TopNotice>
      }
      {@renderListColumns?()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      {@_renderListView()}
    </View>


styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:10
    backgroundColor:'#F6F6F6'
  text:
    flex:1

mapStateToProps = (state)->
  list:state.page_mt.list
  isLoading:state.page_mt.isLoading
  pageIndex:state.page_mt.pageIndex
  completed:state.page_mt.completed
  refreshing:state.page_mt.refreshing
  lastFetchTime:state.page_mt.lastFetchTime
  connected:state.appState.connected
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(pageNum)->
    dispatch fetchGetList(pageNum)
  fetchRefresh:->
    dispatch fetchRefreshList()
Page_Mt = renderAfterTransfer(Page_Mt)
Page_Mt = lazyLoadData(moment.duration(2, 'days'))(Page_Mt)
module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_Mt)
